<html>
<head>
    <style>
        .container {
            width: 600px;
            height: 400px;
            position: relative;
            margin: auto;
        }

        .slider {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .slide {
            width: 100%;
            height: 100%;
            display: none;
        }

        .slide img {
            width: 100%;
            height: 100%;
        }

        .active-slide {
            display: block;
        }

        .prev, .next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgb(0, 0, 0);
            color: white;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
        }

        .prev {
            left: 10px;
        }

        .next {
            right: 10px;
        }

    </style>
</head>
<body>
<div class="container">
    <div class="slider" id="slider">
        <!-- 动态地创建幻灯片元素 -->
    </div>
    <div class="prev" onclick="prevSlide()"><</div>
    <div class="next" onclick="nextSlide()">></div>
</div>

<script>
    // 获取图片的站内地址
    function getImgUrl() {

        // 定义一个空数组，用于存储图片的站内地址
        var imgUrls = [];

        // 使用fetch函数发送GET请求到/get-img接口地址
        fetch("/get-img")
            .then(response => {
                // 如果请求成功，返回响应的JSON数据
                return response.json();
            })
            .then(data => {
                // 检查响应数据中的succeed属性是否为true，表示接口调用成功
                if (data.succeed) {
                    // 解析出图片的站内地址数组，并赋值给imgUrls变量
                    imgUrls = data.data;
                    // 调用setImg函数，设置轮播图的图片
                    setImg(imgUrls);
                }
            })
            .catch(error => {
                // 如果请求失败，打印错误信息到控制台
                console.error(error);
                setImg(imgUrls);
            });

        // 返回imgUrls变量
        return imgUrls;
    }

    // 设置轮播图的图片
    function setImg(imgUrls) {

        // 获取图片的总数
        var imgCount = imgUrls.length;

        // 获取轮播图的元素
        var slider = document.getElementById("slider");

        // 遍历每个图片站内地址，动态地创建对应数量的幻灯片元素，并添加到轮播图中
        for (var i = 0; i < imgCount; i++) {

            // 创建一个div元素，作为幻灯片元素
            var slide = document.createElement("div");

            // 设置幻灯片元素的类名为slide，并设置其id属性为slide-i+1
            slide.className = "slide";
            slide.id = "slide-" + (i +1);

            // 创建一个img元素，作为图片元素
            var img = document.createElement("img");

            // 设置图片元素的src属性为对应的图片站内地址，并设置其alt属性为Image-i+1
            img.src = imgUrls[i];
            img.alt = "Image-" + (i +1);

            // 将图片元素添加到幻灯片元素中
            slide.appendChild(img);

            // 将幻灯片元素添加到轮播图中
            slider.appendChild(slide);

        }

        // 更新轮播图的总数变量为图片的总数
        totalSlides = imgCount;

        // 将第一个幻灯片元素的类名添加active-slide，表示当前显示的幻灯片
        document.getElementById("slide-1").className += " active-slide";
    }

    // 定义当前显示的幻灯片的索引
    var currentIndex = 0;

    // 定义轮播图的总数（初始值为0）
    var totalSlides = 0;

    // 定义轮播图的切换时间间隔（毫秒）
    var interval = 3000;

    // 定义一个定时器，用于自动切换轮播图
    var timer;

    // 切换到下一个轮播图
    function nextSlide() {

        // 停止当前的定时器
        clearInterval(timer);

        // 将当前显示的幻灯片的类名移除active-slide
        document.getElementById("slide-" + (currentIndex +1)).className = "slide";

        // 更新当前显示的幻灯片的索引，如果超过总数，则从头开始
        currentIndex = (currentIndex +1) % totalSlides;

        // 将下一个显示的幻灯片的类名添加active-slide
        document.getElementById("slide-" + (currentIndex +1)).className = "slide active-slide";

        // 启动一个新的定时器，用于自动切换轮播图
        timer = setInterval(nextSlide, interval);
    }

    // 切换到上一个轮播图
    function prevSlide() {

        // 停止当前的定时器
        clearInterval(timer);

        // 将当前显示的幻灯片的类名移除active-slide
        document.getElementById("slide-" + (currentIndex +1)).className = "slide";

        // 更新当前显示的幻灯片的索引，如果小于0，则从尾部开始
        currentIndex = (currentIndex -1 + totalSlides) % totalSlides;

        // 将上一个显示的幻灯片的类名添加active-slide
        document.getElementById("slide-" + (currentIndex +1)).className = "slide active-slide";

        // 启动一个新的定时器，用于自动切换轮播图
        timer = setInterval(nextSlide, interval);
    }

    // 页面加载完成后，执行以下操作
    window.onload = function() {

        // 获取图片的站内地址（此时不会设置轮播图的图片，而是等待fetch函数返回数据后再调用setImg函数）
        getImgUrl();

        // 启动一个定时器，用于自动切换轮播图
        timer = setInterval(nextSlide, interval);
    }

</script>
</body>
</html>
